<template>
    <!-- vue3页面 -->
    
    <div> 
        <el-table :data="tableData" style="width: 100%" border stripe>
            <el-table-column label="合同代码" prop="asset_code"></el-table-column>
            <el-table-column label="合同名称" prop="asset_name"></el-table-column>
            <el-table-column >
                <template #header>
                    <el-checkbox v-model="headerCheckbox" true-label="2"  @change="headerChange(2)">附加基准A</el-checkbox>
                </template>
                <template #default="scope">
                   <el-checkbox v-model="searchData[scope.$index].begin_code"  :true-label="scope.row.asset_01_id"   v-if="scope.row.asset_01_id"  @change="radioChange(scope,searchData[scope.$index].begin_code)" >{{scope.row.asset_01_nm}}</el-checkbox>
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-checkbox v-model="headerCheckbox" true-label="3"  @change="headerChange(3)">附加基准B</el-checkbox>
                </template>
                <template #default="scope">
                   <el-checkbox v-model="searchData[scope.$index].begin_code" :true-label="scope.row.asset_02_id"   v-if="scope.row.asset_02_id"  @change="radioChange(scope,searchData[scope.$index].begin_code)">{{scope.row.asset_02_nm}}</el-checkbox>
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-checkbox v-model="headerCheckbox" true-label="4"  @change="headerChange(4)">附加基准C</el-checkbox>
                </template>
                <template #default="scope">
                   <el-checkbox v-model="searchData[scope.$index].begin_code" :true-label="scope.row.asset_03_id"     v-if="scope.row.asset_03_id"  @change="radioChange(scope,searchData[scope.$index].begin_code)">{{scope.row.asset_03_nm}}</el-checkbox>
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-checkbox v-model="headerCheckbox" true-label="5"  @change="headerChange(5)" >附加基准D</el-checkbox>
                </template>
                <template #default="scope">
                   <el-checkbox v-model="searchData[scope.$index].begin_code"  :true-label="scope.row.asset_04_id" v-if="scope.row.asset_04_id"  @change="radioChange(scope,searchData[scope.$index].begin_code)">{{scope.row.asset_04_nm}}</el-checkbox>
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-checkbox v-model="headerCheckbox" true-label="6"  @change="headerChange(6)">自定义</el-checkbox>
                </template>
                <template #default="scope" >
                   <el-checkbox v-model="searchData[scope.$index].begin_code"  :true-label="scope.row.asset_05_id"  @change="radioChange(scope,searchData[scope.$index].begin_code)">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                   </el-checkbox>
                </template>
            </el-table-column>  

            <el-table-column label="操作">
            <template #default="scope">
                <el-button  size="small" type="danger" @click="handleDelete(scope.$index, scope.row,searchData)">Delete</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue'
export default defineComponent({
    name: 'App',
    setup() {
        const tableData:any =ref([
            {
                asset_name:'第一条',
                asset_code:'001',
                asset_01_id:'000001',
                asset_01_nm:'这是第一条第一列数据内容',
                asset_02_id:'000002',
                asset_02_nm:'这是第一条第二列数据内容',
                asset_03_id:'000003',
                asset_03_nm:'这是第一条第三列数据内容',
                asset_04_id:'000004',
                asset_04_nm:'这是第一条第四列数据内容',
                begin_date:'2022-2-1'
            },
            {
                asset_name:'第二条',
                asset_code:'002',
                asset_01_id:null,
                asset_01_nm:null,
                asset_02_id:'000022',
                asset_02_nm:'这是第二条第二列数据内容',
                asset_03_id:null,
                asset_03_nm:null,
                asset_04_id:'000024',
                asset_04_nm:'这是第二条第四列数据内容',
                begin_date:'2022-2-2'
            },
            {
                asset_name:'第三条',
                asset_code:'003',
                asset_01_id:null,
                asset_01_nm:null,
                asset_02_id:null,
                asset_02_nm:null,
                asset_03_id:null,
                asset_03_nm:null,
                asset_04_id:null,
                asset_04_nm:null,
                begin_date:'2022-2-3'
            },
            {
                asset_name:'第四条',
                asset_code:'004',
                asset_01_id:'000041',
                asset_01_nm:'这是第四条第一列数据内容',
                asset_02_id:null,
                asset_02_nm:null,
                asset_03_id:'000043',
                asset_03_nm:'这是第四条第三列数据内容',
                asset_04_id:null,
                asset_04_nm:null,
                begin_date:'2022-2-4'
            },
        ])
        const searchData =ref([
            {
                asset_name:'',
                asset_code:'',
                begin_code:null,
                begin_date:''
            }
        ])
        const headerCheckbox = ref('2')

        const radioChange =(scope:any,val:any)=>{
            console.log('model',val,scope)
            console.log(searchData.value,'serchdata')
            for(let i =0;i<searchData.value.length;i++){
                if(searchData.value[i].asset_code == scope.row.asset_code){
                    searchData.value[i].begin_code = val
                }
            }
            console.log(searchData.value,'serchdata')
        }

        
        const headerChange = (val:number)=>{
            console.log(val,'vallll')
            
            console.log(headerCheckbox.value,'headeer')

             let ss = "asset_0"+ (val-1)+ '_id';
            console.log(ss,'sss')

            for(let i =0;i<searchData.value.length;i++){
                searchData.value[i].begin_code = tableData.value[i][ss]
            }
            console.log(searchData.value,'serchdata',tableData.value)
            headerCheckbox.value = val.toString()
        }
        
        const handleEdit =(index:any,row:any)=>{
            console.log(index,row)
        }
        const handleDelete =(index:any,row:any,data:any)=>{
            console.log(index,row,data)
        }
        onMounted(()=>{
            let dataLength = tableData.value.length;
            for(let z =0;z<dataLength-1;z++){
                searchData.value.push(
                    {
                        asset_name:'',
                        asset_code:'',
                        begin_code:null,
                        begin_date:'',
                        
                    }
                )
                
            }
            
            for(let i =0;i<tableData.value.length;i++){
                tableData.value[i].asset_05_id ='zidingyi'
                searchData.value[i].asset_name = tableData.value[i].asset_name
                searchData.value[i].asset_code = tableData.value[i].asset_code
                
                if(tableData.value[i].asset_01_id){
                    searchData.value[i].begin_code = tableData.value[i].asset_01_id
                }else if(tableData.value[i].asset_02_id){
                    searchData.value[i].begin_code = tableData.value[i].asset_02_id
                
                }else if(tableData.value[i].asset_03_id){
                    searchData.value[i].begin_code = tableData.value[i].asset_03_id
                
                }else if(tableData.value[i].asset_04_id){
                    searchData.value[i].begin_code = tableData.value[i].asset_04_id
                
                }else if(tableData.value[i].asset_05_id){
                    searchData.value[i].begin_code = tableData.value[i].asset_05_id
                }
                searchData.value[i].begin_date = tableData.value[i].begin_date
            }

            console.log(searchData.value,'search',tableData.value,'table') 
            
        })
        return {
            tableData,
            headerCheckbox,
            // headerClick,
            radioChange,
            handleDelete,
            handleEdit,
            searchData,
            headerChange
        }
    }
})
</script>

<style scoped>

</style>